<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>购物车</title>
    <th:block th:include="common/header :: header"/>
    <link rel="stylesheet" th:href="@{/static/css/cart.css}">
</head>
<body>
<div th:replace="common/navbar :: navbar"></div>
<div class="container-fluid p-5" id="cart-container">
    <div class="card">
        <div class="card-body">
            <div class="get-tab">
                <div class="page-header">
                    <h5>
                        取餐方式
                        <span class="title">您可以选择堂食或者配送等</span>
                    </h5>
                    <div class="switch mt-2" data-animated="true">
                        <input type="checkbox" v-model="longTerm" /><span class="ml-1">长期餐<span class="small">(从今天起一个月)</span></span>
                    </div>
                </div>
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#canteen" role="tab"
                           aria-controls="canteen"
                           aria-selected="true" @click="getType(1)">
                            <h6>堂食</h6>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#self" role="tab"
                           aria-controls="self"
                           aria-selected="false" @click="getType(2)">
                            <h6>自取</h6>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#deliver" role="tab"
                           aria-controls="deliver"
                           aria-selected="false" @click="getType(3)">
                            <h6>配送</h6>
                        </a>
                    </li>
                </ul>
                <div class="tab-content border border-top-0">
                    <div class="tab-pane fade show active" id="canteen" role="tabpanel" aria-labelledby="canteen-tab">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <label for="canteen-time">请选择堂食时间:</label>
                                <input id="canteen-time" type="datetime-local" v-model="canteenTime">
                            </li>
                        </ul>
                    </div>
                    <div class="tab-pane fade" id="self" role="tabpanel" aria-labelledby="self-tab">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <label for="self-time">请选择自取时间:</label>
                                <input id="self-time" type="datetime-local" v-model="selfTime">
                            </li>
                        </ul>
                    </div>
                    <div class="tab-pane fade" id="deliver" role="tabpanel" aria-labelledby="deliver-tab">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <label for="deliver-time">请选择配送时间:</label>
                                <input id="deliver-time" type="datetime-local" v-model="deliverTime">
                            </li>
                            <li class="list-group-item">
                                <label for="deliver-address">请选择配送地址:</label>
                                <select id="deliver-address" v-model="deliverAddress">
                                    <option th:each="address : ${addresses}" th:value ="${address.id}" @click.native="checkAddress()">[[${address.name}]]-[[${address.address}]]-[[${address.name}]]</option>
                                </select>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <hr class="divider">
            <div class="cart_wrap">
                <div class="page-header">
                    <h5>
                        菜单详情
                        <span class="title">选择您喜欢的菜品</span>
                    </h5>
                </div>
                <table class="cart_table" border="1" cellspacing="0">
                    <tr class="cart_title">
                        <th>菜品</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>小计</th>
                    </tr>
                    <tr class="cart_item" v-for="menu in menus">
                        <td class="img_wrap">
                            <img v-bind:src="menu.image">
                            <p>{{menu.title}}</p>
                        </td>
                        <td class="goods_price">{{menu.price.toFixed(2)}}</td>
                        <td class="goods_num_wrap">
                            <span @click="decrease(menu)">-</span>
                            <span>{{menu.quantity}}</span>
                            <span @click="increase(menu)">+</span>
                        </td>
                        <td class="total">{{(menu.quantity * menu.price).toFixed(2)}}</td>
                    </tr>
                </table>
            </div>
            <div class="settle_bar">
                <span><i class="checked_num">{{count}}</i>&nbsp;件商品</span>
                <span style="margin-left:100px;">合计：<i class="total_money">{{totalMoney * (longTerm ? 30 : 1)}}</i></span>
                <button class="btn btn-primary" @click="submit">去结算</button>
            </div>
        </div>
    </div>
</div>
<th:block th:include="common/scripts :: scripts"/>
<script type="text/javascript" th:src="@{/static/js/cart.min.js}"></script>
<script type="text/javascript" th:src="@{/static/js/vue.min.js}"></script>
<script th:inline="javascript">
    new Vue({
        el: "#cart-container",
        data: {
            menu: [],
            count: 0,
            totalMoney: 0.0,
            canteenTime: '',
            selfTime: '',
            deliverTime: '',
            deliverAddress: undefined,
            type: 1,
            longTerm: false
        },
        created() {
            this.init()
        },
        methods: {
            init() {
                this.menus = shoppingCart.list()
                this.count = shoppingCart.list().reduce((count, item) => {
                    count += item.quantity
                    return count
                }, 0)
                this.totalMoney = shoppingCart.total().toFixed(2)
                this.$forceUpdate()
            },
            checkAddress() {
                if ([[${addresses eq null || addresses.isEmpty()}]]) {
                    alert('请前往个人中心完善配送地址信息，再下单')
                }
            },
            decrease(menu) {
                shoppingCart.quantity(menu.productId, -1)
                this.init()
            },
            increase(menu) {
                shoppingCart.add(menu)
                this.init()
            },
            getType(type) {
                this.type = type

            },
            submit() {
                if (this.menus.length === 0) {
                    alert('请选择需要购买的菜品')
                    return;
                }
                switch (this.type) {
                    case 1:
                        if (!this.canteenTime) {
                            alert('请选择堂食时间')
                            return
                        }
                        break
                    case 2:
                        if (!this.selfTime) {
                            alert('请选择自取时间')
                            return
                        }
                        break
                    case 3:
                        if (!this.deliverTime) {
                            alert('请选择配送时间')
                            return
                        }
                        if (!this.deliverAddress) {
                            alert('请选择配送地址信息')
                            return
                        }
                }
                let params = {
                    addressId: this.deliverAddress,
                    getType: this.type === 1 ? '堂食' : this.type === 2 ? '自取' : '外送',
                    getTime: this.type === 1 ? this.canteenTime : this.type === 2 ? this.selfTime : this.deliverTime,
                    menus: this.menus,
                    longTerm: this.longTerm,
                    totalMoney: this.totalMoney
                }
                console.log(params)
                $.ajax({
                    type: 'POST',
                    url: '/order/submit',
                    data: JSON.stringify(params),
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    success: res => {
                        if (res.code === 0) {
                            shoppingCart.destroy()
                            toastr.success('下单成功')
                            location.href = [[@{/order}]]
                        } else if (res.code === -1) {
                            toastr.error(res.message)
                        }
                    },
                    dataType: 'json'
                })
            }
        }
    })
</script>
</body>
</html>